<template>
    <div style="margin-left: 2%;margin-right: 2%;margin-top: 10px">
        <el-card>
            <span style="font-size: 13px">项目编号：</span>
            <el-input size="small"  v-model="projectSearch.projectCode" placeholder="请输入内容" style="width: 130px"></el-input>

            <span style="font-size: 13px;margin-left: 3%">项目名称：</span>
            <el-input size="small" v-model="projectSearch.projectName" placeholder="请输入内容" style="width: 130px"></el-input>

            <span style="font-size: 13px;margin-left: 3%">采购类别：</span>
            <el-select size="small"  v-model="projectSearch.purchaseCategoryId" placeholder="请选择">
                <el-option label="货物类" value="1"></el-option>
                <el-option label="服务类" value="2"></el-option>
                <el-option label="工程类" value="3"></el-option>
            </el-select>

            <div style="display: inline;margin-left: 10%">
                <el-button size="mini" @click="searchCondition(1)" type="primary">查询</el-button>
                <el-button size="mini" @click="clearMes" type="primary">清空查询</el-button>
            </div>
        </el-card>
        <div style="margin-top: 10px;margin-bottom: 10px">
<!--            v-loading="loading"-->
            <el-table
                    :data="projectTable"
                    border
                    v-loading="loading"
                    :max-height="tableHeight"
                    style="width: 100%">
                <el-table-column
                        prop="projectCode"
                        min-width="170px"
                        label="项目编号"
                >
                </el-table-column>
                <el-table-column
                        prop="projectName"
                        min-width="170px"
                        label="项目名称"
                >
                </el-table-column>
                <el-table-column
                        prop="categoryName"
                        min-width="100px"
                        label="采购类别"
                >
                </el-table-column>
                <el-table-column
                        prop="purchaseMethod"
                        min-width="60px"
                        label="采购方式">
                </el-table-column>
                <el-table-column
                        prop="budget"
                        min-width="120px"
                        label="预算金额(元)">
                </el-table-column>
                <el-table-column
                    prop="state"
                    min-width="170px"
                    label="成交供应商审批">
                </el-table-column>
                <el-table-column
                        prop="quaApproveTime"
                        min-width="170px"
                        label="审核通过时间">
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    min-width="170px"
                    label="创建时间">
                </el-table-column>
                <el-table-column
                    fixed="right"
                        width="180px"
                        label="操作"
                >
                    <template slot-scope="{$index,row}">
                        <el-button type="text"  v-if="row.isPass === 1" style="text-align: center;margin-left: 7px" @click="projectManage(row)">成交结果通知书管理</el-button>
                        <el-button type="text" v-else style="text-align: center;margin-left: 7px;color: #97a8be" @click="projectManage(row)">成交结果通知书管理</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20, 50, 100, 200]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

        <el-dialog
                title="成交结果通知书管理"
                :visible.sync="centerDialogVisible"
                width="75%"
                center>
            <result-notification-manage :projectInfo="projectInfo" :resultNotifyStampedList="resultNotifyStampedList"
                                        :ResultNotificationFileList="ResultNotificationFileList"
                                        :supplierPriceFirst="supplierPriceFirst"/>
        </el-dialog>
    </div>
</template>

<script>

import resultNotificationManage from "@/components/shopping/resultNotificationManage.vue"
import {
    conditionAllResultNotify,
    getAllResultNotification,
    getAllResultStamped,
    getFirstSuppler
} from "@/api/shopping/resultNotifa";

export default {
    name: "invitation",
    data() {
        return {
            projectSearch: {
                projectName: "",
                projectCode: "",
                purchaseCategoryId: "",
            },
            projectTable: [],
            loading: true, // 修改是否显示加载页面
            currentPage: 1,
            total: 0,
            pageSize: 20,
            centerDialogVisible: false,
            // 传给子组件的对象
            projectInfo:{
                projectId:"",
                projectCode:"",
                projectName: "",
                categoryName: "",
                budget:"",
                isSubmit:0,
                isArchive:0,
            },
            resultNotifyStampedList: [], // 获得成交结果的盖章文件列表
            ResultNotificationFileList: [], //生成的成交结果文件
            supplierPriceFirst: {}, // 返回查询排名第一的成交对象
            tableHeight: 200,
        }
    },
    methods: {
        clearMes() {
            Object.keys(this.projectSearch).forEach(index => this.projectSearch[index] = '')
        },
        handleSizeChange(val){
            this.pageSize = val;
            this.searchCondition(0);
        },
        handleCurrentChange(val){
            this.currentPage = val;
            this.searchCondition(0)
        },
        // 请求获得返回的项目
        async searchCondition(data){
            // this.$loading({
            //     fullscreen: true,
            // });
            this.loading = true
            try {
                if (data === 1) {
                    this.currentPage = 1
                }
                let theDate = {
                    page: this.currentPage,
                    pageSize: this.pageSize,
                    projectCode: this.projectSearch.projectCode,
                    projectName: this.projectSearch.projectName,
                    purchaseCategoryId: this.projectSearch.purchaseCategoryId
                }

                let res = await conditionAllResultNotify(theDate)
                if (res) {
                    this.loading = false
                }
                if (res.data.code === 200) {
                    this.projectTable = res.data.data.projectVos;
                    this.total = res.data.data.total
                } else {
                    this.projectTable = [];
                    this.total = 0;
                    this.$message.error(res.data.msg);
                }
            } catch (e) {
                this.$message.error(e.messages)
            } finally {
                // this.$loading().close()
                this.loading = false
            }
        },
        // 点击项目管理之后
        async projectManage(row) {
            this.$loading({
                fullscreen: true,
            });
            try {
                if (row.isPass === 0) {
                    this.$message("项目没有审批通过不能查看,请联系采购管理进行审批")
                } else {
                    this.projectInfo.projectId = row.projectId;
                    this.projectInfo.projectCode = row.projectCode;
                    this.projectInfo.projectName = row.projectName;
                    this.projectInfo.categoryName = row.categoryName;
                    this.projectInfo.budget = row.budget;
                    this.projectInfo.isSubmit = row.isSubmit;
                    this.projectInfo.isArchive = row.isArchive;
                    let res = await getFirstSuppler(row.projectId);
                    if (res.data.code === 200) {
                        this.supplierPriceFirst = res.data.data;
                    } else {
                        this.supplierPriceFirst = {}
                        this.$message.error(res.data.msg)
                    }
                    this.resultNotifyStampedList = []
                    this.ResultNotificationFileList = []
                    await this.getAllResultNotifyStamped(row.projectId)
                    await this.getAllResultNotificationFileList(row.projectId)
                    this.centerDialogVisible = true
                }
            } catch (e) {
                this.$message.error(e.messages)
            } finally {
                this.$loading().close()
            }
        },
        // 获得盖章后的文件列表
        async getAllResultNotifyStamped(data){
            try {
                let res = await getAllResultStamped(data);
                if (res.data.code === 200) {
                    this.resultNotifyStampedList = res.data.data;
                }else {
                    this.resultNotifyStampedList = []
                    this.$message.error(res.data.msg())
                }
            } catch (e) {
                this.$message.error(e)
            }
        },
        // 获得生成结果通知书的文件
        async getAllResultNotificationFileList(data){
            try {
                let res = await getAllResultNotification(data)
                if (res.data.code === 200) {
                    this.ResultNotificationFileList = res.data.data;
                } else {
                    this.ResultNotificationFileList = [];
                    this.$message.error(res.data.msg())
                }
            } catch (e) {
                this.$message.error(e)
            }
        }

    },

    components: {
        resultNotificationManage,
    },
    mounted() {
        this.searchCondition(0)
    },
    created() {
        this.tableHeight = window.innerHeight - 350;
    }
}
</script>

<style scoped>
.page{
    position: fixed;
    width: 100%;
    height: 30px;
    bottom: 10px;
}
</style>
